<script setup>
import {ref} from 'vue'

const tt = ref(true)


const user = ref([
  {id: 11, name: 'jack'},
  {id: 22, name: 'mary'},
  {id: 33, name: 'andy'},
  {id: 44, name: 'mike'}
])

//v-model 多选 数组
const love = ref([])

function myno() {
  let ok = user.value.filter(item => !love.value.includes(item.id))
  love.value.splice(0, love.value.length)
  ok.forEach(item => {
    love.value.push(item.id)
  })
  console.log(ok)
}

function myall() {
  love.value.splice(0, love.value.length)
  user.value.forEach(item=>love.value.push(item.id))
}

</script>

<template>
  <label><input type="checkbox" v-model="tt">{{ tt }}</label>
  <hr>
  <button @click="myall">全选</button>
  <button @click="love.splice(0,love.length)">取消</button>
  <button @click="myno">反选</button>
  <hr>
  <label v-for="item in user"><input type="checkbox" :value="item.id" v-model="love">{{ item.name }}</label>
  <hr>
  <p>{{ love }}</p>
</template>


<style>

</style>
